<template>
  <div class="box">
    <div class="detail-before img-list">
      <img src="https://ss.lanqb.com/4aeca7ff-a727-4b35-9c53-04e51226d797" class="detail-img" />
      <img src="https://ss.lanqb.com/cb36e2e1-8bb3-41b8-b6bd-8dcddd8a6d9a" class="detail-img"/>
      <img src="https://ss.lanqb.com/02e3d513-ef62-4884-8937-82db4f0b12e6" class="detail-img"/>
      <img src="https://ss.lanqb.com/88d13c0d-db49-42ee-8393-8e434adc36d8" class="detail-img"/>
      <img src="https://ss.lanqb.com/a20d798a-edb2-43f5-8228-3e05efa5a3ef" class="detail-img"/>
      <img src="https://ss.lanqb.com/d20f96ce-f4cc-4c12-8913-da666751c844" class="detail-img"/>
    </div>
         <div class="detail-center">
          <motai :width="'21.92708333%'" :height="'50%'" :top="0" :left="0" :src="'https://ss.lanqb.com/2eb0ee4b-4721-4cc6-869c-6c6a3f985f37.jpg'"> </motai>
          <motai :width="'21.92708333%'" :height="'50%'" :top="'50%'" :left="0" :src="'https://ss.lanqb.com/45e0e7fe-0830-438e-af99-84a67b1668fe.jpg'"> </motai>
          <motai :width="'21.92708333%'" :height="'33.33333333%'" :top="0" :left="'21.92708333%'" :src="'https://ss.lanqb.com/815b6947-e5f8-4015-ade9-f560505a25fa.jpg'"> </motai>
          <motai :width="'21.92708333%'" :height="'33.33333333%'" :top="0" :left="'43.85416667%'" :src="'https://ss.lanqb.com/3a3285bd-b9c4-411f-8717-6e3fb755a68c.jpg'"> </motai>
          <motai :width="'34.21875%'" :height="'33.33333333%'" :top="0" :left="'65.78125%'" :src="'https://ss.lanqb.com/0dba3950-ad44-4114-a7cf-e146b839f52c.jpg'"> </motai>
          <motai :width="'34.21875%'" :height="'33.33333333%'" :top="'33.33333333%'" :left="'21.92708333%'" :src="'https://ss.lanqb.com/597a6b8b-ced3-41ce-85f9-eb39176f928e.jpg'"> </motai>
          <motai :width="'21.92708333%'" :height="'33.33333333%'" :top="'33.33333333%'" :left="'56.14583333%'" :src="'https://ss.lanqb.com/4c4e4bb4-f375-46c0-85c1-252ae6ec2464.jpg'"> </motai>
          <motai :width="'21.92708333%'" :height="'33.33333333%'" :top="'33.33333333%'" :left="'78.07291667%'" :src="'https://ss.lanqb.com/589f1d3f-142b-4b7c-8904-0a2c37e3dd33.jpg'"> </motai>

          <motai :width="'21.92708333%'" :height="'33.33333333%'" :top="'66.66666667%'" :left="'21.92708333%'" :src="'https://ss.lanqb.com/4779906c-16be-4a6e-82a5-d040d99a5874.jpg'"> </motai>
          <motai :width="'21.92708333%'" :height="'33.33333333%'" :top="'66.66666667%'" :left="'43.85416667%'" :src="'https://ss.lanqb.com/b864973a-fa81-496b-a36c-00f64290f79c.jpg'" > </motai>
          <motai :width="'34.21875%'" :height="'33.33333333%'" :top="'66.66666667%'" :left="'65.78125%'" :src="'https://ss.lanqb.com/930d429e-7eaa-4fd7-8b91-a235efbaaa69.jpg'"> </motai>
        </div>  
  

    <div class="detail-after img-list">
      <img src="https://ss.lanqb.com/3266ac5b-5fae-4a03-98ef-618c36f20674" class="detail-img">
      <img src="https://ss.lanqb.com/9cdc5723-5a0a-4866-82f9-96fa07cd9d3a" class="detail-img">
      <img src="https://ss.lanqb.com/4eb49395-064a-4ba8-be95-469dd569a3d3" class="detail-img">
      <img src="https://ss.lanqb.com/ab7fe0c1-7aa4-400f-9c0f-ce65a81664f3" class="detail-img">
      <img src="https://ss.lanqb.com/04ca03f3-5e33-4eec-8701-39bc02a91191" class="detail-img">
      <img src="https://ss.lanqb.com/e487b54f-9a04-4a7f-8fe4-99b22cd60f2a" class="detail-img">
      <img src="https://ss.lanqb.com/192daf2f-eba3-4ab2-9a35-ff913e986001" class="detail-img">
      <img src="https://ss.lanqb.com/486257d8-ec0e-4386-9444-2f1db9b10cfe" class="detail-img">
      <img src="https://ss.lanqb.com/7719ab80-20e7-4611-89a3-ecd740cf63bd" class="detail-img">
    </div>
  </div>
</template>
<script>
import motai from '@/views/courseDetail/components/motai.vue'
export default {
  components: { motai },

}
</script>
<style lang="scss" scoped>
.box {
  max-width: 1920px;
  margin-right: auto;
  margin-left: auto;
}
.img-list{
  .detail-img {
    display: block;
    width: 100%;
  }
}
.detail-center{
  position: relative;
    width: 100%;
    height: 1002px;
    // width: 1002px;
    margin-right: auto;
    margin-left: auto;
}
</style>
